<template>
	<div class="home">
		<header class="home_header" :class="{ active:headerScorll }">
			<div>left</div>
			<div class="header_search">
				<span>幸福商城</span>
				<router-link to="/product-list" class="search_text">
					寻找幸福
				</router-link>
			</div>
			<div>
				<van-icon
					class="user_login"
					name="user-o"
					size="1.25rem"
					:color="headerScroll ? 'white':'#1baeae'"
				/>
			</div>
		</header>
		<div>
			<swipe :list="carousels" />
		</div>
		<div class="categoryList">
			<div
				class="category_item"
				v-for="item in categoryList"
				:key="item.name"
				@click="tip"
			>
			<div>
				<img :src="item.imgUrl" alt="" />
			</div>
			<div class="category_text">
				{{ item.name }}
			</div>
			</div>
		</div>
		<div class="new_product_line">
			<div class="product_title">新品上线</div>
			<van-skeleton title :row="3" animate :loading="loading">
				<div class="product_content">
					<div
						class="product_content_item"
						v-for="item in newGoodses"
						:key="item.goodsId"
						@click="goToDetail(item)"
					>
						<img :src="item.goodsCoverImg" :alt="item.tag" />
						<div class="good_desc">
							<div>{{ item.goodName }}</div>
							<div class="good_price">￥{{ item.sellingPrice }}</div>
						</div>
					</div>
				</div>
			</van-skeleton>
		</div>
		<div class="hot_good">
			<div class="product_title">热门商品</div>
			<van-skeleton title :row="3" animate :loading="loading">
				<div class="product_content">
					<div
						class="product_content_item"
						v-for="{
							goodsId,
							goodName,
							goodsCoverImg,
							sellingPrice,
							tag,
						} in hotGoodses"
						:key="goodsId"
					>
					<img :src="goodsCoverImg" :alt="tag"/>
					<div class="good_desc">
						<div>{{ goodName }}</div>
						<div class="good_price">￥{{ sellingPrice }}</div>
					</div>
					</div>
				</div>
			</van-skeleton>
		</div>
		<nav-bar />
	</div>
</template>

<script>
import Main from '../components/Main.vue';
import HeaderTest from "@/components/HeaderTest.vue";
import Swipe from '@/components/Swipe.vue';
import NavBar from '@/components/NavBar.vue';
import { onMounted,reactive,toRefs } from 'vue';
import { Toast } from 'vant';
import { useRouter } from "vue-router";
import { getHome } from '@/service/home.js';


export default {
	setup(){

		const router = useRouter();
		const state = reactive({
			carousels: [],
			hotGoodses: [],
			newGoodses: [],
			recommendGoodses:[],
			categoryList:[
				{
					name: "新蜂超市",
					imgUrl:
						"https://s.yezgea02.com/1604041127880/%E8%B6%85%E5%B8%82%402x.png",
					categoryId: 100001,
				},
				{
					name: "新蜂服饰",
					imgUrl:
						"https://s.yezgea02.com/1604041127880/%E6%9C%8D%E9%A5%B0%402x.png",
					categoryId: 100003,
				},
				{
					name: "全球购",
					imgUrl:
						"https://s.yezgea02.com/1604041127880/%E5%85%A8%E7%90%83%E8%B4%AD%402x.png",
					categoryId: 100002,
				},
				{
					name: "新蜂生鲜",
					imgUrl:
						"https://s.yezgea02.com/1604041127880/%E7%94%9F%E9%B2%9C%402x.png",
					categoryId: 100004,
				},
				{
					name: "新蜂到家",
					imgUrl:
						"https://s.yezgea02.com/1604041127880/%E5%88%B0%E5%AE%B6%402x.png",
					categoryId: 100005,
				},
				{
					name: "充值缴费",
					imgUrl:
						"https://s.yezgea02.com/1604041127880/%E5%85%85%E5%80%BC%402x.png",
					categoryId: 100006,
				},
				{
					name: "9.9元拼",
					imgUrl: "https://s.yezgea02.com/1604041127880/9.9%402x.png",
					categoryId: 100007,
				},
				{
					name: "领劵",
					imgUrl:
						"https://s.yezgea02.com/1604041127880/%E9%A2%86%E5%88%B8%402x.png",
					categoryId: 100008,
				},
				{
					name: "省钱",
					imgUrl:
						"https://s.yezgea02.com/1604041127880/%E7%9C%81%E9%92%B1%402x.png",
					categoryId: 100009,
				},
				{
					name: "全部",
					imgUrl:
						"https://s.yezgea02.com/1604041127880/%E5%85%A8%E9%83%A8%402x.png",
					categoryId: 100010,
				},
			],
			loading: true,
			headerScroll: false,
		});
		onMounted(async () => {
			Toast.loading({
				message:"加载中...",
				forbidClick:true,
			});

			const { data } = (await getHome()) || {};
			console.log('===============99999');
			console.log(data);
			state.carousels = data.carousels;
			state.hotGoodses = data.hotGoodses;
			state.newGoodses = data.newGoodses;
			state.recommendGoodses = data.recommendGoodses;
			state.loading = false;
			Toast.clear();
		});
		const tip = () => {
			Toast("敬请期待",10);
		};
		const goToDetail =(item)=>{
			router.push({path:`/product/${item.goodsId}`});
		};
		window.addEventListener("scroll",()=>{
			let scrollTop = 
			window.pageYOffset ||
			document.documentElement.scrollTop ||
			document.body.scrollTop;
			state.headerScroll = scrollTop > 100;
		});
		return {
			...toRefs(state),
			goToDetail,
			tip,
		};
	},
	components:{
		HeaderTest,
		Swipe,
		NavBar,
	},
};
	
</script>

<style lang="less">
@import "@/common/style/mixin.less";
.home {
  .home_header {
    width: 100%;
    height: @headerHeight;
    line-height: 3rem;
    z-index: 100;
    position: fixed;
    display: flex;
    justify-content: space-between;
    justify-items: center;
    box-sizing: border-box;
    top: 0;
    color: @primary;
    padding: 0 1rem;
    &.active {
      background: @primary;
      color: white;
    }
  }
  .header_search {
    width: 70%;
    height: 1.8rem;
    margin: 0.6rem 0;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 1rem;
    padding: 0 1rem;
    color: @primary;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 2rem;
    text-align: left;
    box-sizing: border-box;
    .search_text {
      color: #666;
      font-size: 0.8rem;
      margin-left: 20%;
      line-height: 1.8rem;
    }
  }
  .user_login {
    line-height: 3rem;
  }

  .categoryList {
    display: flex;
    flex-wrap: wrap;
    .category_item {
      width: 20%;
      img {
        width: 2.25rem;
        margin-top: 0.6rem;
        margin-bottom: 0.4rem;
      }
      .category_text {
        font-size: 12px;
      }
    }
  }
  .hot_good,
  .new_product_line {
    .product_title {
      color: @primary;
      background: #f9f9f9;
      height: 3rem;
      line-height: 3rem;
      font-weight: 500;
    }
    .product_content {
      display: flex;
      flex-wrap: wrap;
      .product_content_item {
        box-sizing: border-box;
        width: 50%;
        padding: 1rem;
        > img {
          width: 7.5rem;
        }
        .good_desc {
          width: 100%;
          padding: 1rem 0;
          font-size: 0.8rem;
          overflow: hidden;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
        .good_price {
          color: @primary;
        }
        &:nth-child(2n + 1) {
          border-right: 1px solid #e9e9e9;
          border-bottom: 1px solid #e9e9e9;
        }
        &:nth-child(2n) {
          border-bottom: 1px solid #e9e9e9;
        }
      }
    }
  }
}
</style>
